<template>
    <div class="bgi">
        <div class="loginContainer">
            <h3 class="loginTitle">品优购后台管理系统</h3>
            <a-form
                    :model="sysUser"
                    name="basic"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
            >
                <a-form-item
                        label="用户名"
                        name="username"
                >
                    <a-input v-model:value="User.username" />
                </a-form-item>
                <a-form-item
                        label="密  码"
                        name="password"
                >
                    <a-input-password v-model:value="User.password" />
                </a-form-item>
                <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                    <a-checkbox v-model:checked="checked" class="loginRemember">Remember me</a-checkbox>
                </a-form-item>
                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit" @click="doLogin">登      录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>

</template>

<script lang="ts">
    import store from '@/store';
    import { message } from 'ant-design-vue';
    import axios from 'axios';
    import { defineComponent ,ref } from 'vue';
    import {useRouter} from "vue-router";

    export default defineComponent({
        name: "Login",
        setup(){
            const User = ref({});
            const router = useRouter();
            const doLogin=()=>{
                axios.post('http://localhost:8899/doLogin', User.value).then((response) => {
                    const data = response.data;

                    if (data.code===200) {
                        message.success("登录成功！");
                        console.log(data.data);
                        //调用store/index.ts  ,注意回调的数据视频具体情况而定
                        //可以以jwt为键
                        store.commit("SET_TOKEN",data.data);
                        router.push('/home');
                    } else {
                        message.error(data.message);
                    }
                });
            };

            return{
                User,
                doLogin
            }
        }
    })
</script>

<style scoped>
    .bgi{
        background-image: url("../img/3.jpg");
        background-size: cover;
    }

    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 188px auto;
        width: 450px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        background-image: url("../img/微信图片_20230131141159.jpg");
        background-size: cover;
    }

    .loginTitle {
        margin: 0px auto 20px auto;
        text-align: center;
        color: white;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
        color: white;
    }

</style>